﻿@{
    ViewBag.Title = "首页";
    Layout = null;
}

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <link href="~/Content/Style/conmon.css" rel="stylesheet" type="text/css">
    <link href="~/Content/fonts/iconfont.css" rel="stylesheet" type="text/css">
    <link href="~/Content/Style/home.css" rel="stylesheet" />
    <link href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/css/swiper.min.css" rel="stylesheet">
    <!-- Include the Swiper library -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.7/js/swiper.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <!-- Swiper JS Vue -->
    <script src="https://cdn.jsdelivr.net/npm/vue-awesome-swiper@3.1.2/dist/vue-awesome-swiper.js"></script>
    @*jqueryAlert提示框*@
    <link href="~/Content/alert/css/alert.css" rel="stylesheet" />
    <script src="~/Content/alert/js/alert.js"></script>
    <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js"></script>

    <style>
        .homeindex {
            position: absolute;
            width: 100%;
            overflow: hidden;
            padding-bottom: 60px;
        }

        .image-header {
            position: relative;
            width: 100%;
            height: 0;
            padding-top: 100%;
        }

            .image-header img {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

        .textname {
            color: black;
            font-weight: bold;
            font-family: cursive;
            font-size: 16px;
        }

        .text {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            width: 100%;
            margin: 1px 0;
            font-size: 13px;
        }

        .now {
            margin-right: 8px;
            font-size: 14px;
            color: rgb(240, 20, 20);
        }

        .old {
            text-decoration: line-through;
            font-size: 10px;
            color: rgb(147, 153, 159);
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="homeindex">
            <!---顶部轮播图-->
            <local-swiper ref="awesomeSwiperB" :options="swiperOptionB">
                <local-slide v-for="(item,index) in WeChatIndex" :key="index" class="image-header">
                    <a :href="'/Classification/Summary?id='+ item.DishesID">
                        <img :src="item.CarouselURL">
                    </a>
                </local-slide>
            </local-swiper>
            <div class="nav_box" style="margin-bottom:10px;">
                <!---商品搜索框-->
                <div class="seach" v-on:click="SeachDishes()">
                    <input id="SeachDishesNmae" name="SeachDishesNmae" placeholder="搜索商品" />
                    <span class="sea">
                        <img src="../../Content/images/search_icon.png" />
                    </span>
                </div>
                <!---类型-->
                <div style="text-align:center;overflow: hidden;">
                    <a :href="'/Information/ListInformation?Type='+ 1">
                        <img src="~/Content/images/testImages/通知.jpg" style="width:30%;height:50px;" />
                    </a>
                    <a :href="'/Information/ListInformation?Type='+ 2">
                        <img src="~/Content/images/testImages/促销.jpg" style="width:30%;height:50px;" />
                    </a>
                    <a :href="'/Information/ListInformation?Type='+ 3">
                        <img src="~/Content/images/testImages/帮助.jpg" style="width:30%;height:50px;" />
                    </a>
                </div>

                <!----我是选择菜单列表，下拉可以选择---->
                <!---我是左边的列表--->
                <select class="r_nav" id="PaiXu" v-on:change="SeachDishesGoods()">
                    <option value="0">默认排序</option>
                    <option value="1">销量排序</option>
                    <option value="2">评论排序</option>
                    <option value="3">评分排序</option>
                </select>
                <!---我是中间的列表--->
                <select class="r_nav" id="DishesTypeID1" v-on:change="SeachDishesGoods()" onchange="getDishesType2(value)">
                    <option value="0">一级分类</option>
                </select>
                <!---我是右边的列表--->
                <select class="r_nav" id="DishesTypeID2" v-on:change="SeachDishesGoods()"></select>
                <div class="clearfix"></div>
            </div>
            <!---商品信息-->
            <div v-for="i in DishesGoods" style="width:48.5%;float:left;margin:0 2px;">
                <a :href="'/Classification/Summary?id='+ i.DishesID">
                    <div>
                        <img :src="ChangeDishesPic(i.DishesPicSmall)" style="width:100%;height:150px;" />
                    </div>
                    <p class="textname">{{i.DishesNmae}}</p>
                    <p class="text">{{i.DishesTxt}}</p>
                    <p style="margin-bottom:5px;">
                        <span class="now" v-if="i">￥{{i.DishesPay}}</span><span class="old" v-if="i">￥{{i.DishesMon}}</span>
                    </p>
                </a>
            </div>
        </div>
        <!---底部-->
        <footer>
            <div class="footer_box">
                <div class="footer_li">
                    <a href="/" style="color:#F56C03;">
                        <div class="footer-img">
                            <i class="iconfont icon-union" style="font-size: 28px;"></i>
                        </div>
                        <span>首页</span>
                    </a>
                </div>
                <div class="footer_li">
                    <a href="/Classification/Index">
                        <div class="footer-img">
                            <i class="iconfont icon-dingdan1" style="font-size: 28px;"></i>
                        </div>
                        <span>分类</span>
                    </a>
                </div>
                <div class="footer_li">
                    <a href="/ShoppingCart/Index">
                        <div class="footer-img">
                            <i class="iconfont icon-gouwuche4" style="font-size: 28px;"></i>
                        </div>
                        <span>购物车</span>
                    </a>
                </div>
                <div class="footer_li">
                    <a href="/Information/Index">
                        <div class="footer-img">
                            <i class="iconfont icon-wode1" style="font-size: 28px;"></i>
                        </div>
                        <span>个人中心</span>
                    </a>
                </div>
            </div>
        </footer>
    </div>

    <script src="~/Content/Script/jquery-1.8.3.min.js"></script>
    <!-- 引入 Vue -->
    <script src="https://unpkg.com/vue"></script>

    <script>
        Vue.config.productionTip = false;   //Vue去掉警告 You are running Vue in development mode
        var vm = new Vue({
            el: '#app',
            components: {
                LocalSwiper: VueAwesomeSwiper.swiper,
                LocalSlide: VueAwesomeSwiper.swiperSlide,
            },
            data() {
                return {
                    dada: 0,
                    WeChatIndex: '',
                    DishesGoods: '',
                    Order_Carousel_T: '',
                    currentIndex: 0,
                    swiperOptionB: {
                        pagination: {
                            el: '.swiper-pagination',
                            dynamicBullets: true
                        }
                    }
                };
            },
            created() {
                $.ajax({
                    url: "/Home/GetDishesGoods",
                    type: "POST",
                    dataType: "json",
                    data: { YZM: '', RETID: 1 },
                    success: function (data) {
                        vm.DishesGoods = data.rows;
                        //console.log(vm.DishesGoods);
                    }
                });
                this.GetDishesCarousel();
            },
            methods: {
                GetDishesCarousel() {
                    $.ajax({
                        url: "/Home/GetOrder_DishesCarousel",
                        type: "POST",
                        dataType: "json",
                        data: { YZM: '', RETID: 1 },
                        success: function (data) {
                            vm.WeChatIndex = data.rows;
                            //console.log(vm.WeChatIndex);
                        }
                    });
                },
                ChangeDishesPic(Pic) {
                    if (Pic == "" || Pic == null) {
                        Pic = "../../Content/images/testImages/暂无图片.jpg" //后台图片为空,设置为默认图片
                    }
                    return Pic;
                },
                SeachDishes() {
                    window.location.href = '/Home/SeachProductos';
                },
                SeachDishesGoods: function () {
                    var PaiXu = $("#PaiXu").val();
                    var DishesTypeID1 = $("#DishesTypeID1").val();
                    var DishesTypeID2 = $("#DishesTypeID2").val();
                    $.ajax({
                        url: "/Home/GetDishesList",
                        type: "POST",
                        dataType: "json",
                        data: { DishesNmae: '', PaiXu: PaiXu, DishesTypeID1: DishesTypeID1, DishesTypeID2: DishesTypeID2, YZM: '', RETID: 1 },
                        success: function (data) {
                            if (data.BS == 1 && data.rows != null) {
                                vm.DishesGoods = data.rows;
                                //console.log(vm.DishesGoods);
                            }
                            else {
                                vm.DishesGoods = null;
                                var dialog = jqueryAlert({
                                    'title': '查询提示',
                                    'content': "没有找到相关商品!",
                                    'modal': true,
                                    'buttons': {
                                        '确定': function () {
                                            dialog.close();
                                        },
                                    }
                                });
                            }
                        }
                    });
                },
            }
        });

        $(function () {
            $.post("/Classification/getType_PC", null, function (result) {
                if (result != null) {
                    typeList = JSON.parse(result);
                    $.each(typeList, function (j, item) {
                        $("#DishesTypeID1").append("<option value='" + item.DishesTypeID + "'>" + item.DishesTypeName + "</option>");
                    });

                    var DishesTypeID1 = $("#DishesTypeID1").val();
                    getDishesType2(DishesTypeID1);
                }
            });
        });

        function getDishesType2(DishesTypeID1) {
            $("#DishesTypeID2 option").remove();
            $("#DishesTypeID2").append('<option value="0">二级分类</option>');
            $.each(typeList, function (j, item) {
                if (DishesTypeID1 == item.DishesTypeID) {
                    $.each(item.Children, function (j, child) {
                        $("#DishesTypeID2").append("<option value='" + child.DishesTypeID + "'>" + child.DishesTypeName + "</option>");
                    });
                }
            });
        }
    </script>
</body>

</html>
